<template>
  <div class="productOrder-container">
    <div class="container" v-show="showproductOrder">
      <div class="order">
        <div class="container-query">
          <el-form :inline="true" size="mini">
            <el-form-item>
              <el-select
                clearable
                placeholder="订单类型"
                v-model="ordertype"
                @change="places($event)"
                class="select"
              >
                <el-option
                  :label="c3.title"
                  :value="c3.id"
                  v-for="c3 in ordertypeoption"
                  :key="c3.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="productid"
                placeholder="订单主键、openId"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="vipsort" placeholder="会员编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="productname" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                clearable
                placeholder="订单状态"
                v-model="orderstate"
                @change="placesstate($event)"
                class="select"
              >
                <el-option
                  :label="c3.title"
                  :value="c3.id"
                  v-for="c3 in orderstateoption"
                  :key="c3.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="vipname"
                placeholder="联系人姓名、联系人电话"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="valuedata"
                type="date"
                @change="datetimeMath()"
                placeholder="选择日期"
              >
              </el-date-picker>
              --
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="valueover"
                type="date"
                @change="datetimeMath()"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="query"
                class="sizezs"
                size="mini"
                >查询</el-button
              >
              <download-excel
                class="querybutton"
                id="querybutton"
                :data="tableData"
                :fields="json_fields"
                worksheet="My Worksheet"
                name="商品订单列表"
                >导出
              </download-excel>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="container-table">
        <el-table
          :data="tableData"
          border
          stripe
          size="mini"
          style="width: 120%"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
        >
          <el-table-column
            prop="orderProductId"
            label="商城子订单编号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cardCode"
            label="订单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contractPhoneOne"
            label="订单手机号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="customerName"
            label="会员姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="payAmount"
            label="支付金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="expressNo"
            label="快递单号"
            align="center"
          ></el-table-column>
          <el-table-column prop="" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="Backfill(scope.row)"
                >回填快递单号</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
      <el-dialog
        title="回填快递单号"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formOrder"
          :rules="rulesNum"
          ref="formOrder"
        >
          <el-form-item label="快递单号" prop="expressNo">
            <el-input
              v-model="formOrder.expressNo"
              placeholder="快递单号"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="startOtherPlugin('formOrder')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "productOrder",
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      rulesNum: {
        expressNo: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: "blur",
          },
        ],
      },
      formOrder: {
        expressNo: "",
        orderProductId: "",
      },
      // 回填弹窗
      dialogVisible: false,
      ordertail: "", //编辑详情的对象
      json_fields: {
        编号: "orderId",
        类型: "typeId",
        昵称: "nickName",
        商品名称: "productName",
        数量: "productNumber",
        金额: "payAmount",
        状态: "status",
        客户常用名: "customerName",
        会员卡号: "cardCode",
        联系人电话: "contractPhoneOne",
        创建时间: "createTime",
        支付时间: "payTime",
      }, //导出的表格的数据
      status: null,
      order: "", //
      typeId: "", //订单类型最后传值
      productDetails: [], //小表格数组
      showproductOrder: true, //控制展示列表和编辑列表的显示隐藏
      valuedata: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
        .toLocaleDateString()
        .replace(/\//g, "-"), //日期开始数组
      valueover: new Date(new Date().getTime() + 86400000)
        .toLocaleDateString()
        .replace(/\//g, "-"), //日期结束的时间
      ordertype: "", //订单类型
      productname: "", //商品名称
      productid: "", //订单id
      vipsort: "",
      vipname: "",
      ordertypeoption: [
        {
          id: 1,
          title: "全部订单",
        },
        {
          id: 0,
          title: "普通订单",
        },

        {
          id: 10,
          title: "团单",
        },
        {
          id: 20,
          title: "杀单",
        },
        {
          id: 30,
          title: "商品组合单",
        },
        {
          id: 40,
          title: "权益兑换",
        },
        {
          id: 90,
          title: "混合订单",
        },
      ],
      orderstateoption: [
        {
          id: "waitPay",
          title: "等待支付",
        },
        {
          id: "cancelPay",
          title: "取消支付",
        },
        {
          id: "failPay",
          title: "支付失败",
        },
        {
          id: "payd",
          title: "已支付",
        },
        {
          id: "cancelled",
          title: "已取消",
        },
        {
          id: "refunding",
          title: "退款中",
        },
        {
          id: "refundSuccess",
          title: "退款成功",
        },
        {
          id: "refundFailed",
          title: "退款失败",
        },
      ],
      orderstate: "",
      vipname: "", //会员手机号
      tableData: [], //表格的数组 假数据
      oerdermerchandise: [], //订单详情中订单商品到数据
    };
  },
  mounted() {
    localStorage.setItem("pageSize", 10);
    localStorage.setItem("pageNum", 1);
    this.mallOrderList(); //调用订单列表查询接口
  },
  methods: {
    // 回填快递单号按钮
    Backfill(row) {
      console.log(row);
      this.formOrder.expressNo = "";
      this.formOrder.orderProductId = row.orderProductId;
      this.dialogVisible = true;
    },
    mallOrderList() {
      localStorage.removeItem("pageNum");
      localStorage.removeItem("pageSize");
      var employeeInfo = JSON.parse(
        localStorage.getItem("employeesInformation")
      );
      if (employeeInfo.supplierId == null) {
        this.$message({
          message: "您不是供应商，暂无权限",
          type: "warning",
        });
        return;
      }
      this.$axios
        .mallOrderList({
          supplierId: Number(
            JSON.parse(localStorage.getItem("employeesInformation")).supplierId
          ),
          startTime: this.valuedata,
          endTime: this.valueover,
          typeId: this.ordertype,
          status: this.orderstate,
          productName: this.productname,
          orderCodeOrOpenId: this.productid,
          customerId: this.vipsort,
          customerNameOrPhone: this.vipname,
        })
        .then((res) => {
          this.tableData = [];
          if (
            JSON.parse(localStorage.getItem("employeesInformation"))
              .supplierId != null
          ) {
            console.log(res.data);
            this.pageTotal = res.total;
            let lstOrderData = [];
            for (let i = 0; i < res.data.length; i++) {
              var orderData = res.data[i];
              for (let j = 0; j < orderData.lstSupplierProduct.length; j++) {
                var orderSupplierData = orderData.lstSupplierProduct[j];
                var tmpOrderData = {};
                tmpOrderData.cardCode = orderData.cardCode;
                tmpOrderData.contractPhoneOne = orderData.contractPhoneOne;
                tmpOrderData.createTime = orderData.createTime;
                tmpOrderData.customerName = orderData.customerName;
                tmpOrderData.orderId = orderData.orderId;
                tmpOrderData.payAmount = orderData.payAmount;
                tmpOrderData.payTime = orderData.payTime;
                tmpOrderData.typeId = orderData.typeId;
                tmpOrderData.orderProductId = orderSupplierData.orderProductId;
                tmpOrderData.productName = orderSupplierData.productName;
                tmpOrderData.supplierId = orderSupplierData.supplierId;
                tmpOrderData.expressNo = orderSupplierData.expressNo;
                this.tableData.push(tmpOrderData);
                console.log(lstOrderData);
              }
            }
          } else {
            this.tableData = [];
            this.$message({
              message: "您不是供应商，暂无权限",
              type: "warning",
            });
          }
        });
    },
    //修改快递单号
    getmallOrderProductedit() {
      this.$axios.getmallOrderProductedit(this.formOrder).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.mallOrderList();
          this.dialogVisible = false;
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    startOtherPlugin(formName) {
      console.log(formName);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getmallOrderProductedit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 订单状态
    placesstate(value) {
      console.log(value);
    },
    //查询
    query() {
      localStorage.setItem("pageSize", 10);
      localStorage.setItem("pageNum", 1);
      this.mallOrderList();
    },
    places(row) {
      this.ordertype = row;
    },
    // 点击编辑调详情接口
    edit(row) {
      this.showproductOrder = false;
      // this.mallOrderList();
      console.log(row.orderId);
      this.$axios
        .orderBackstageDetails({
          orderId: row.orderId,
        })
        .then((res) => {
          this.ordertail = res.data;
          this.productDetails = res.data.productDetails;
        });
    },
      // 分页
     handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.mallOrderList();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.currentPage=value
      this.mallOrderList();
      // orders = res.data;
    },
    datetimeMath() {
      console.log(this.valueover);
      let a = this.valueover.split("-");
      console.log(a);
      let yyyy = a[0];
      let mm = a[1] - 3;
      let dd = a[2];
      this.valuedata = yyyy + "-" + mm + "-" + dd;
      console.log(this.valuedata);
    },
    deepClone(object) {
      var clone = {};
      for (var key in object) {
        var value = object[key];
        if (typeof value !== "object") {
          clone[key] = value;
        } else {
          clone[key] = deepClone(value);
        }
      }
      return clone;
    },
    // 删除的接口
    dele(row) {
      this.$confirm(`你确定删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // 点击确定按钮之后发请求
          //   let a = this.deleteMallProduct(row.productId);
          //   if (a.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 再次获取列表的数据
          //   }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.merchandise-detail {
  line-height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 500px;
  height: 200px;
}

.merchandise-table {
  width: 50%;
}

.merchandise {
  position: relative;
  width: 100%;
  margin-top: 50px;
}

.payment {
  margin-top: 20px;
}

.sizezs {
  width: 90px;
  background-color: #6090ec;
}

.payment span {
  margin-right: 180px;
  margin-top: 30px;
  display: inline-block;
}

.detail-item-p span {
  line-height: 60px;
  margin-right: 100px;
}

.container-detail {
  width: 100%;
  height: 898px;
  margin-left: 30px;
}

.order {
  padding-top: 5px;
}

/* .container-query { */
/* padding: 10px auto; */
/* margin: 20px auto; */
/* } */

.el-form {
  margin-left: 10px;
  margin-top: 10px;
}

.datablock {
  display: inline-block;
}

.datablock .demonstration {
  margin-right: 10px;
  margin-left: 10px;
}

.green {
  float: left;
  width: 10px;
  height: 100%;
  background-color: #6090ec;
}

.primary {
  margin: 20px;
  border-radius: 0px;
  background-color: #6090ec;
  border-color: transparent;
}

.select1 {
  margin-left: 10px;
}

.inputbox {
  /* width:100%; */
  width: 989px;
  display: inline-flex;
  margin: 10px;
}

.el-input__inner {
  margin-right: 10px;
}

.inputbox .el-input {
  margin-right: 10px;
}

.el-select {
  margin-right: 10px;
  margin-left: 10px;
}

.querybutton {
  width: 90px;
  height: 30px;
  background-color: #6090ec;
  margin-right: 15px;
}

.container-table {
  width: 100%;
  margin-left: 10px;
}

.yishen {
  height: 30px;
  text-align: center;
  background: #48b0fc;
  color: #fff;
}

.edit {
  width: 60px;
  height: 30px;
  font-size: 12px;
  text-align: center;
  background: #48b0fc;
  color: #fff;
}

.delt {
  width: 60px;
  font-size: 12px;
  margin: 6px;
  height: 30px;
  text-align: center;
  background: #ff5722;
  color: #fff;
}

.el-cha {
  margin-left: 25px;
}

#bluebtn {
  float: left;
  /* margin-right: 150px; */
  width: 50px /* 50/80 */;
  height: 50px;
}

#querybutton {
  float: left;
  color: #fff;
  text-indent: 1.5rem;
  line-height: 35px;
}
</style>